
<!--
使用方法 <imgUpload v-model="imageUrl" ref="clearFile" :imageSize="8" :disabled = "disabled"></imgUpload>
 -->
<template>
    <div class="content66">
        <div class="contentCon">
            <el-upload
                :action="FileUploadUrl"
                list-type="picture-card"
                :file-list="fileList"
                ref = "refsClear"
                :on-success="success"
                :on-remove = "remove"
                :before-upload = "beforeUp"
                :disabled = "disabled"
                :on-error="error"
                accept = ".jpg,.png,.gif,.bmp"
                :on-preview="handlePictureCardPreview">
                <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog v-model="dialogVisible" size="tiny" :title="'文件名称：'+ fileName" custom-class="dialog-layer" v-if="showFileName">
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
            <el-dialog v-model="dialogVisible" size="tiny" custom-class="dialog-layer" v-if="!showFileName">
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
        </div>
        <el-button type='text' @click="uploadAgain" v-if='value'>重新上传</el-button>
    </div>
</template>
<script>
    export default {
    props: {
        value: {
            type: String,
            required: true
        },
        disabled: {
            type: Boolean,
            default: false
        },
        showFileName: {
            type: Boolean,
            default: false
        },
        imageSize: {
            type: Number,
            required: false
        }
    },
    data() {
        return {
            dialogVisible: false,
            dialogImageUrl: '',
            fileName: '',
            setTime: null,
            FileUploadUrl: process.env.UPLOAD_URL,
            cacheImage: '',
            cacheStatus: false
        };
    },
    computed: {
        fileList: {
            get() {
                console.log(this.value, 'this.fileList')
                return this.value=='' ? [] : [{url: this.value}];
            },
            set(val) {
                this.$emit('input', val[0].url);
            }
        }
    },
    methods: {
        // 重新上传
        uploadAgain() {
            var inputFile = this.$refs.refsClear.$el.querySelector('input[type=file]');
            inputFile.click();
        },
        // 放大图片
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        // 清空
        clearFiles() {
            this.$refs.refsClear.clearFiles();
            this.$emit('input', '');
        },
        // 上传成功
        success(response, file) {
            if (file.response.status == 200) {
                this.$emit('input', file.response.content.accessUrl);
                this.fileName = file.response.content.fileName;
                this.cacheImage = file.response.content.accessUrl;
                this.cacheStatus = false;
                this.$emit('getImgName', file.response.content.fileName);
                this.$message.success('上传成功'); 
            }
        },
        // 上传验证
        beforeUp(file) {
            const isJPG = file.type == 'image/jpeg' || file.type == 'image/png' || file.type == 'image/bmp' || file.type == 'image/gif';
            var imageSize = this.imageSize == undefined ? 5: this.imageSize;
            const isLt5M = file.size / 1024 / 1024 < imageSize + 0.1;
            if (!isJPG) {
                this.cacheStatus = true;
                this.$message.error('不支持该格式图片上传');
                return false;
            }
            if (!isLt5M) {
                this.cacheStatus = true;
                this.$message.error('上传图片大小不能超过'+imageSize+'MB!');
                return false;
            }
            if (isLt5M) {
                // this.stopUpload()
                return true;
            } else {
                return false;
            }
        },
        // 延时8秒，不成功就停止上传
        // stopUpload(){
        //     this.setTime = setTimeout(()=>{
        //         if(!this.value){
        //             this.$refs.refsClear.abort();
        //             this.$refs.refsClear.clearFiles();
        //             this.$emit('input', '');
        //             this.$message.error('上传失败，请重新上传');
        //         }
        //     },8000)
        // },
        error() {
            this.$message.error('上传失败，请重新上传');
        },
        // 移除
        remove(data) {
            if (!this.cacheStatus) {
                this.$emit('input', '');
            } else {
                this.cacheStatus = false;
            }
        }
    }
    };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .content66{
        width:180px;
        height:200px;
        overflow:hidden;
        .contentCon{
            height:150px;
            overflow:hidden;
        }
    }
</style>
